<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./picture/favicon.ico" type="image/png">
    <title>happy birthday to hyh</title>
    <style>
        
    </style>
</head>
<body>
    <audio class="song" controls loop>
        <source src="./music/hbd.mp3"></source>
    </audio>
    <div class="container">
        <img class="happy-birthday-banner" src="./picture/banner.png">
        <button id='light-on-btn' class="btn-position style-button">Turn On Lights</button>

        <div class="bulbs-container">
            <div class="bulb bulb_yellow"></div>
            <div class="bulb bulb_red"></div>
            <div class="bulb bulb_blue"></div>
            <div class="bulb bulb_green"></div>
            <div class="bulb bulb_orange"></div>
            <div class="bulb bulb_pink"></div>
        </div>

        <img class="balloon-border" src="./picture/balloon-border.png">

        <div id="balloon1" class="balloon"><h2 style="color:#F2B300;">黄</h2></div>
        <div id="balloon2" class="balloon"><h2 style="color:#0719D4;">彧</h2></div>
        <div id="balloon3" class="balloon"><h2 style="color:#D14D39;">晗</h2></div>
        <div id="balloon4" class="balloon"><h2 style="color:#8FAD00;">生</h2></div>
        <div id="balloon5" class="balloon"><h2 style="color:#8377E4;">日</h2></div>
        <div id="balloon6" class="balloon"><h2 style="color:#99C96A;">快</h2></div>
        <div id="balloon7" class="balloon"><h2 style="color:#20CFB4;">乐</h2></div>

        <img class="cake" src="./picture/cake.png">

        <div class="message">健康、快乐，是我认为世界上最美好的祝福，送给22岁的你！</div>
    </div>
    </body>
</html>